<template>
  <div v-if="permission" class="form_list absolute inset-0 flex flex-col"
       v-loading="loading">
    <el-card class="box-card content_card">
      <div class="header_card">
        <!-- <el-button size="small"
                   @click="openPage"
                   type="primary">Add in new page</el-button> -->
        <el-button size="small"
                   @click="openDialog"
                   type="primary">Add</el-button>
      </div>
      <div class="form_list_content">
        <el-table :data="formList"
                  :border="true"
                  style="width: 100%;height:480px">
          <el-table-column prop="id"
                           height="36px"
                           label="Id">
          </el-table-column>
          <el-table-column prop="formVersion"
                           height="36px"
                           label="FormVersion">
          </el-table-column>
          <!-- <el-table-column prop="formSchema"
                           height="36px"
                           label="formSchema">
          </el-table-column> -->
          <el-table-column prop="createTime"
                           label="Create Date">
            <template slot-scope="scope">
              <div> {{scope.row.createTime|ClientFormat}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime"
                           label="Last Update Date">
            <template slot-scope="scope">
              <div> {{scope.row.updateTime ? scope.row.updateTime : scope.row.createTime|ClientFormat}}</div>
            </template>
          </el-table-column>
          <el-table-column label="Operation"
                           width="100px">
            <template slot-scope="scope">
              <div style="display:flex;justify-content:space-around;">
                <!-- <i class="cuifont icon_share"
                   style="cursor:pointer"
                   @click="openShare(scope)"></i> -->
                <!-- <i class="cuifont icon_link_type"
                   style="cursor:pointer"
                   @click="openPage(scope)"></i> -->
                <i class="cuifont icon_edit"
                   v-if="checkUerEditDelectPremis(scope.row.creator)"
                   style="cursor:pointer"
                   @click="openDialog(scope)"></i>
                <i class="cuifont icon_delete"
                   v-if="checkUerEditDelectPremis(scope.row.creator)"
                   style="cursor:pointer"
                   @click="deleteForm(scope)"></i>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background
                       layout="total, prev, pager, next, jumper"
                       :page-size="10"
                       :page-count='currentPage'
                       :current-page='currentPage'
                       @current-change="handleCurrentChange"
                       :total="total">
        </el-pagination>
      </div>
    </el-card>
    <!-- <ShareLinkDialog v-if="shareLink"
                     ref="share-link"></ShareLinkDialog> -->
    <UserFormDialog :userformDialogData="userformDialogData"
                    @envent="getJsonFormList(currentPage)"
                    ref="userFormDialog"></UserFormDialog>
  </div>

    <div class="absolute inset-0 flex flex-col"
       v-loading="authLoading"
       v-else>
    <ZContainer>
      <ZEmpty description="No Permission" v-if="!authLoading"/>
    </ZContainer>
  </div>
</template>
<script>
import UserFormDialog from './userFormDialog.vue'
import ZContainer from '@/components/storybook/z-container'
import ZEmpty from '@/components/storybook/z-empty'

export default {
  components: {
    UserFormDialog,
    ZContainer,
    ZEmpty
  },
  data () {
    return {
      userformDialogData: {
        isNew: true,
        formTitle: null,
        formCode: null,
        id: null
      },
      formList: [],
      loading: false,
      currentPage: 1,
      total: 0,
      dialogData: { formTitle: '', description: '', createTime: '', updateTime: '', formSchema: '' },
      shareLink: false,

      permission: false,
      authLoading: false
    }
  },
  async created () {
    try {
      this.authLoading = true
      await this.getDashboardAuth()
      this.getJsonFormList(1)
    } catch (error) {

    } finally {
      this.authLoading = false
    }
  },
  methods: {
    async getDashboardAuth () {
      const { getAssert } = this.$interface.system
      const { formCode } = this.$route.query
      const params = {
        sourceId: formCode,
        sourceType: 6
      }
      const { data: response } = await getAssert(params)
      if (response.code === 403) {
        // eslint-disable-next-line no-throw-literal
        throw 'no permission'
      }
      this.permission = true
    },

    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
      this.getJsonFormList(this.currentPage)
    },
    openPage (scope) {
      if (scope.row) {
        let userFormUrl = this.$router.resolve({
          path: '/userForm',
          query: { formCode: this.$route.query.formCode, formTitle: this.$route.query.formTitle, id: scope.row.id, formId: this.$route.query.id }
        })
        window.open(userFormUrl.href, '_blank')
      } else {
        let userFormUrl = this.$router.resolve({
          path: '/userForm',
          query: { formCode: this.$route.query.formCode, formTitle: this.$route.query.formTitle, id: null, formId: this.$route.query.id }
        })
        window.open(userFormUrl.href, '_blank')
      }
    },
    hasPerViewFormList () {
      let list = 0
      if (this.$hasPermission('sys:formlist:dataview')) {
        list = 1
      } else {
        list = 0
      }
      return list
    },
    hasPerViewFormData () {

    },
    openDialog (scope) {
      if (scope.row) {
        this.userformDialogData = {
          isNew: false,
          formTitle: this.$route.query.formTitle,
          formCode: scope.row.formCode,
          id: scope.row.id,
          formId: this.$route.query.id
        }
      } else {
        this.userformDialogData = { isNew: true, formCode: this.$route.query.formCode, formTitle: this.$route.query.formTitle }
      }
      this.$refs.userFormDialog.visible = true
    },
    deleteForm (scope) {
      this.$confirm(this.$t('custom.delete'), this.$t('prompt.title'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel')
      }).then(() => {
        const params = { id: scope.row.id }
        this.loading = true
        this.$interface.reports.deleteFormDataApi(params).then(({ data: res }) => {
          if (res.code !== 0) {
            this.loading = false
            return this.$message.error(res.msg)
          }
          this.$message({
            type: 'success',
            message: this.$t('deletesuccess')
          })
          this.getJsonFormList(1)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('cancelDelete')
        })
      })
    },
    checkUerEditDelectPremis (id) {
      if (this.$hasPermission('sys:formlist:dataview')) {
        return true
      } else {
        if (this.$hasPermission('sys:formlist:edit') || this.$store.state.user.id === id) return true
        else return false
      }
    },
    getJsonFormList (currentPage) {
      this.currentPage = currentPage
      const params = { current: currentPage, size: 10, desc: 'create_time', formCode: this.$route.query.formCode, scope: 'ALL' }
      this.loading = true
      this.$interface.reports.getFormDataListApi(params).then(({ data: res }) => {
        if (res.code !== 0) {
          this.loading = false
          return this.$message.error(res.msg)
        }
        // if (this.hasPerViewFormList(res.roleIds) > 0) {
        //   this.formList = res.data.records
        // }
        // this.formList = this._.filter()
        if (this.$hasPermission('sys:formlist:dataview')) {
          this.formList = res.data.records
        } else {
          let formList = []
          for (let index = 0; index < res.data.records.length; index++) {
            const element = res.data.records[index]
            if (element.creator === this.$store.state.user.id) formList.push(element)
          }
          this.formList = formList
        }
        this.total = res.data.total
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    view (scope) {
      this.$router.push({
        path: `/form-${scope.row.formCode}`,
        query: { formCode: scope.row.formCode }
      })
    }
  }
}
</script>
<style lang="scss">
.form_list {
  .el-card {
    box-shadow: none !important;
  }
  .header_card {
    height: 43px !important;
    height: 100%;
    .title {
      font-size: 20px;
      font-weight: 600;
      color: #606266;
    }
  }
  .el-card.content_card {
    padding: 0 0 20px !important;
    th {
      color: #606266 !important;
      font-size: 14px !important;
    }
  }
  .el-card__body {
    padding-top: 6px !important;
  }
}
</style>
